<template>
    <view class="slide-main">
        <view class="list" v-for="(item,index) in list" :key="index">
            <liu-swipe-action :index="index" @clickItem="clickItem">
                <view class="item">
                    <image class="item-img" src="https://cdn.pixabay.com/photo/2022/03/31/14/53/camp-7103189_1280.png">
                    </image>
                    <view class="item-name">{{item}}</view>
                </view>
            </liu-swipe-action>
        </view>
    </view>
</template>

<script>
	import liuSwipeAction from "@/uni_modules/liu-swipe-action/components/liu-swipe-action/liu-swipe-action.vue";
    export default {
        data() {
            return {
                list: ['第1条', '第2条', '第3条', '第4条', '第5条', '第6条']
            }
        },
		components:{
			liuSwipeAction
		},
        methods: {
			
            //点击操作回调事件
            clickItem(e) {
                console.log('所点击的列表索引：' + e.index)
                console.log('所点击的按钮id：' + e.id)
            }
        }
    }
</script>

<style scoped>
    .slide-main {
        width: 100%;
        height: 100vh;
        background-color: #f0f0f0;
    }

    .list {
        width: 100%;
        margin-top: 1px;
    }

    .item {
        width: 100%;
        height: 120rpx;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .item-img {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        margin-left: 28rpx;
    }

    .item-name {
        margin-left: 16rpx;
        font-size: 30rpx;
        color: #666666;
    }
</style>